<script lang="ts" setup>
import { queryReviewList, editReview, review } from "../service";
import { IResponseData } from "@/@types/utils.request";
import { formatDate } from "@/utils/formatDate";

const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	id: {
		type: Number,
		default: 0,
	},
});

const emit = defineEmits<{
	(e: "update:modelValue", value: boolean): void;
	(e: "refresh", value: boolean): void;
}>();
const visible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", !!val);
	},
});

const articleId = computed(() => props.id);
const auditStatus = ref(0);
const viewData = ref<any[]>([]);

const auditStatusList = [
	{
		id: 0,
		name: "未审核",
	},
	{
		id: 1,
		name: "已同意",
	},
	{
		id: 2,
		name: "已拒绝",
	},
];

const getInfo = async () => {
	try {
		const response: IResponseData<any> = await queryReviewList({
			articleId: articleId.value,
			auditStatus: auditStatus.value,
		});
		const { code, msg } = response;
		if (code === 0) {
			viewData.value = response.data;
			console.log(msg);
		}
	} catch (error: any) {
		console.log(error);
	}
};
const onCancel = () => {
	emit("update:modelValue", false);
};

// 评论编辑弹窗
const editVisible = ref(false);
const editData = ref<any>();
const handleEdit = (row: any) => {
	editData.value = row;
	editVisible.value = true;
};

const onEditConfirmm = async () => {
	try {
		const response: IResponseData<any> = await editReview({
			...editData.value,
		});
		const { code, msg } = response;
		if (code === 0) {
			ElMessage({
				message: msg,
				type: "success",
			});
			editVisible.value = false;
		} else {
			ElMessage({
				message: msg,
				type: "error",
			});
		}
	} catch (error: any) {
		console.log(error);
	}
};

const onEditCancel = () => {
	editVisible.value = false;
};

// 评论审核弹窗
const auditVisible = ref(false);
const auditData = ref<any>({
	auditStatus: "",
	auditFailCause: "",
	commentId: "",
});
const auditDataStatusList = [
	{
		id: 1,
		name: "通过",
	},
	{
		id: 2,
		name: "不通过",
	},
];
const handleAudit = (row: any) => {
	row.auditStatus = 1;
	auditData.value = row;

	auditVisible.value = true;
};

const onAuditConfirmm = async () => {
	try {
		const response: IResponseData<any> = await review({
			...auditData.value,
		});
		const { code, msg } = response;
		if (code === 0) {
			ElMessage({
				message: msg,
				type: "success",
			});
			getInfo();
			auditVisible.value = false;
		} else {
			ElMessage({
				message: msg,
				type: "error",
			});
		}
	} catch (error: any) {
		console.log(error);
	}
};

const onAuditCancel = () => {
	auditVisible.value = false;
};
</script>

<template>
	<el-dialog
		v-model="visible"
		title="评论列表"
		:close-on-press-escape="false"
		top="10vh"
		fullscreen
		width="700px"
		@open="getInfo"
		:before-close="onCancel"
	>
		<el-form label-width="auto">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="审核状态：">
						<el-select v-model="auditStatus" @change="getInfo">
							<el-option v-for="item in auditStatusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-table :data="viewData" style="width: 100%" stripe border>
			<el-table-column type="index" label="序号" width="100" />
			<el-table-column prop="userNickName" label="用户昵称" />
			<el-table-column prop="userPhone" label="用户号码" />
			<el-table-column prop="content" label="评论内容" />
			<el-table-column prop="createTime" label="评论时间">
				<template #default="{ row }"> {{ formatDate(row.createTime) }}</template>
			</el-table-column>
			<el-table-column label="操作" prop="action" width="200">
				<template #default="{ row }">
					<el-button type="primary" link @click="handleEdit(row)"
						><template #icon><IconSvg name="edit" /></template>编辑</el-button
					>
					<el-button type="primary" link @click="handleAudit(row)"
						><template #icon><IconSvg name="edit" /></template>审核通过</el-button
					>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog v-model="editVisible" title="编辑" :close-on-press-escape="false" top="10vh" width="520px">
			<el-form :model="editData" label-width="auto">
				<el-form-item label="是否精选：" prop="isChoiceness">
					<el-switch v-model="editData.isChoiceness" :active-value="1" :inactive-value="0" />
				</el-form-item>
				<el-form-item label="是否上架：" prop="isShow">
					<el-switch v-model="editData.isShow" :active-value="1" :inactive-value="0" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onEditCancel">取消</el-button>
					<el-button type="primary" @click="onEditConfirmm"> 确认 </el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="auditVisible" title="审核" :close-on-press-escape="false" top="10vh" width="520px">
			<el-form :model="auditData" label-width="auto">
				<el-form-item label="审核状态：" prop="auditStatus">
					<el-select v-model="auditData.auditStatus">
						<el-option
							v-for="item in auditDataStatusList"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注：" prop="auditFailCause ">
					<el-input v-model="auditData.auditFailCause" :rows="2" type="textarea" placeholder="请输入..." />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onAuditCancel">取消</el-button>
					<el-button type="primary" @click="onAuditConfirmm"> 确认 </el-button>
				</span>
			</template>
		</el-dialog>
	</el-dialog>
</template>
